<template>
  <div>
    <div style="text-align: left">
      <el-form :model="companyId" :inline="true">
        <el-form-item label="公司名称">
          <el-select
            v-model="companyId"
            filterable
            remote
            :remote-method="getcompany"
            :loading="loading"
            placeholder="请输入公司名称关键字查询"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCompanyInfos">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: left">
      公司名称：{{companyInfos.name}}
      <br>
      公司地址：{{companyInfos.address}}
      <br>
      公司电话：{{companyInfos.tel}}
    </div>
    <div>
      <el-table :data="accountInfos" align="center">
        <el-table-column prop="username" label="账户名"></el-table-column>
        <el-table-column prop="tibaoren" label="提报人"></el-table-column>
        <el-table-column prop="issue_id" label="申请单号"></el-table-column>
      </el-table>
    </div>
    <div>
      <el-table :data="macInfos" align="center">
        <el-table-column prop="mac" label="MAC地址"></el-table-column>
        <el-table-column prop="tibaoren" label="提报人"></el-table-column>
        <el-table-column prop="issue_id" label="申请单号"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companyId: "",
      companyList: [],
      loading: false,
      companyInfos: {},
      macInfos: [],
      accountInfos: []
    };
  },
  methods: {
    getcompany(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.axios
            .get("/searchcompany", {
              params: {
                keyword: query
              }
            })
            .then(response => {
              this.companyList = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        });
      } else {
        this.companyList = [];
      }
    },
    getCompanyInfos() {
      this.axios
        .get("/get_taizhanginfos", {
          params: {
            companyId: this.companyId
          }
        })
        .then(response => {
          this.companyInfos = response.data.companyinfos;
          this.macInfos = response.data.macinfos;
          this.accountInfos = response.data.accountinfos;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
